const HtmlWebpackPlugin=require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack=require("webpack");
const path=require("path");
let Mock=require("mockjs");

let data=Mock.mock({
    "list|12":[{
        img:"@image(100x100,@color)",
        title:"@ctitle",
        "price|500-3000":0,
    }]
})


module.exports={
    entry:'./str/index.js',
    output:{
        filename:"main.js",
        path:path.join(__dirname,"dist")
    },
  plugins: [
    
    new HtmlWebpackPlugin({template: './str/index.html'}),
    new MiniCssExtractPlugin()
  ],
  mode:"development",
  module: {
    rules: [{
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
    },
    {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
]
  },
  devServer:{
      host:"localhost",
      port:2000,
      hot:true,
      open:true,
      before(app){
          app.get('/list', (req, res) => {
              res.send(data.list);
          })
      }
  }
}